<template>
  <div class="kv-list">
    <Table
      border
      :columns="columns"
      :data="list"
      @on-selection-change="selectionChangeKeys"
    ></Table>
    <div style="margin-top:10px; text-align: right;" v-if="pageShow == true">
      <Page
        @on-change="changeListPage"
        @on-page-size-change="pageSizeChange"
        show-sizer
        :current="page"
        :page-size="pageSize"
        :total="listTotal"
      />
    </div>
  </div>
</template>
<script>
import { KV } from "@/api/kv.js";

// grid方式展示key
export default {
  data() {
    return {
      columns: [
        // 表格形式展示表头
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "TYPE",
          width: 70,
          render: (h, params) => {
            return h("img", {
              attrs: {
                src:
                  params.row.is_dir == true
                    ? ""
                    : "",
                style: "width:35px;height:35px"
              },
              on: {
                click: () => {
                  this.openKey(params.row);
                }
              }
            });
          }
        },
        {
          title: "Name",
          key: "name"
        },
        {
          title: "KEY",
          key: "path"
        },
        {
          title: "Version",
          key: "version"
        },
        {
          title: "Value",
          key: "value",
          render: (h, params) => {
            return h("div", [
              h('Tooltip', {
                props: {
                  placement: 'bottom',
                  'max-width': 500,
                  content: params.row.value
                }
              }, [
                h('span',{
                  style: {
                    'overflow': 'hidden',
                    '-webkit-line-clamp': 2,
                    'text-overflow': 'ellipsis',
                    'display': '-webkit-box',
                    '-webkit-box-orient': 'vertical'
                  }
                }, params.row.value)
              ]),
            ])
          }
        },
        {
          title: " ",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.openKey(params.row);
                    }
                  }
                },
                params.row.is_dir == true
                  ? this.$t("key.open")
                  : this.$t("key.show")
              ),
              h(
                "Poptip",
                {
                  props: {
                    confirm: true,
                    title: this.$t("public.confirmDelete"),
                  },
                  style:{
                    display: params.row.is_dir == true ? 'none' : 'inline'
                  },
                  on: {
                    "on-ok": () => {
                      this.delOneKey(params.row.path);
                    }
                  }
                },
                [
                  h(
                    "Button",
                    {
                      props: {
                        type: "error",
                        size: "small"
                      }
                    },
                    this.$t("public.delete")
                  )
                ]
              )
            ]);
          }
        }
      ],
      baseList: [], // 永远存储者key列表
      list: [], // 当前显示列表
      page: 1,
      pageSize: 10, // 每页大小
      listTotal: 0, // 总行数
      pageShow: true, // 是否显示分页

      dir: "", // 要显示的目录
      selected: [] // 选中的key
    };
  },
  mounted() {},
  methods: {
    getList(dir) {
      this.list = [];
      this.dir = dir;
      KV.GetKeyList(dir).then(response => {
        this.baseList = JSON.parse(JSON.stringify(response.data || []));
        this.listTotal = this.baseList.length;
        this.changeListPage(1);
        // console.log(response);
      });
    },
    checkKey(item) {
      item.check = !item.check;

      let selected = [];
      this.list.forEach(val => {
        // console.log(val)
        if (val.check == true) {
          selected.push(val);
        }
      });
      this.selected = selected;
      console.log(selected);
    },
    openKey(item) {
      this.$emit("openKey", item);
    },
    // 选择key
    selectionChangeKeys(selections){
      this.selected = selections;
      console.log(selected);
    },
    // 清除
    clearSelected() {
      this.selected = [];
    },

    changeListPage(page){
      this.page = page || 0;
      // pageSize
      this.list=this.baseList.slice((page - 1) * this.pageSize,page * this.pageSize);
      console.log(page);
    },
    pageSizeChange(pageSize){
      this.pageSize = pageSize;
      this.changeListPage(1);
      this.page = 1;
    },
    // 删除一个值
    delOneKey(dir) {
      if (!dir) {
        return;
      }
      KV.DelKey(dir).then(response => {
        this.getList(this.dir);
      });
    },




  }
};
</script>

<style lang="scss" scoped>
.kv-list{
  padding: 10px;
}
</style>
